<template>
    <div class="login-bg">
        <div class="login-center">
            <el-card class="login-card">
                <div class="login-title">
                    <img src="https://element-plus.org/images/element-plus-logo.svg" class="login-logo" />
                    <span>后台管理系统登录</span>
                </div>
                <el-form :model="loginForm" ref="loginFormRef" label-width="70px" class="login-form">
                    <el-form-item label="用户名">
                        <el-input v-model="loginForm.username" placeholder="请输入用户名" clearable />
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" show-password
                            clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" style="width:100%" size="large" @click="onLogin">登 录</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const loginForm = ref({
    username: '',
    password: ''
})
const loginFormRef = ref()

const onLogin = () => {
    if (!loginForm.value.username || !loginForm.value.password) {
        window.alert('请输入用户名和密码')
        return
    }
    window.alert(`登录成功，欢迎 ${loginForm.value.username}`)
}
</script>

<style scoped>
.login-bg {
    min-height: 100vh;
    width: 100vw;
    background: linear-gradient(135deg, #74ebd5 0%, #ACB6E5 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-card {
    width: 23.75rem;
    border-radius: 1.125rem;
    box-shadow: 0 0.5rem 2rem 0 rgba(31, 38, 135, 0.18);
    padding: 2.25rem 2rem 1.75rem 2rem;
    background: rgba(255, 255, 255, 0.95);
}

.login-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.375rem;
    font-weight: bold;
    margin-bottom: 1.75rem;
    color: #333;
}

.login-logo {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.625rem;
}

.login-form {
    margin-top: 0.625rem;
}
</style>